<template>
  <div id="index">
    <van-notice-bar left-icon="volume-o" :scrollable="false">
      <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :touchable="false"
          :show-indicators="false"
      >
        <van-swipe-item>明月直入，无心可猜。</van-swipe-item>
        <van-swipe-item>仙人抚我顶，结发受长生。</van-swipe-item>
        <van-swipe-item>今人不见古时月，今月曾经照古人。</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="image in images">
        <img :src="image" style="width: 100%; height: 100%" alt="">
      </van-swipe-item>
    </van-swipe>
    <van-cell center title="心动模式">
      <template #right-icon>
        <van-switch v-model="checked" :loading="isLoading"/>
      </template>
    </van-cell>
    <div class="scroll-container" id="scroll-container" @scroll="handleScroll">
      <user-card-list :user-list="recommendUserList"/>
      <van-loading v-if="isLoading" color="#0094ff" size="24px">加载中...</van-loading>
      <van-empty style="width: 100%; height: 100%" v-if="!recommendUserList || recommendUserList.length < 1" image="search" description="暂无匹配用户"/>
    </div>

  </div>
</template>

<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import request from "../plugins/request.ts";
import UserCardList from "../components/UserCardList.vue";
import {UserType} from "../models/user";
import {useUserStore} from "../stores";
console.log("欢迎来到圆梦聚友园!!!")
const userStore = useUserStore();

const recommendUserList = ref<UserType[]>([]);
const pageNum = ref(1);
/**
 * 获取全量推荐用户
 */
const getAllRecommendUser = async () => {
  pageNum.value = 1
  const result = await request.get('/user/recommend', {
    params: {
      "pageSize": 10,
      "pageNum": pageNum.value
    },
  })
  if (result.data.code === 200 && result.data.data) {
    result.data.data.forEach((user: any) => {
      if (user.tags) {
        // 将json字符串转换为数组
        user.tags = JSON.parse(user.tags)
      }
    })
    recommendUserList.value = result.data.data;
  }
}
onMounted(async () => {
  isLoading.value = true
  //页面加载时，先获取推荐用户
  await getAllRecommendUser()
  // 再获取当前登录用户的基本信息
  await userStore.getCurrentLoginUser();
  isLoading.value = false
})

/**
 * 实现页面滚动分页
 */
async function handleScroll(event: Event) {
  const { target } = event;
  const scrollContainer = target as HTMLElement;
  if (scrollContainer) {
    const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
    if (scrollTop + clientHeight >= scrollHeight && checked.value == false) { // 到达底部时加载更多
      pageNum.value++
      if (pageNum.value > 10) return;
      // 加载数据的函数
      const result = await request.get('/user/recommend', {
        params: {
          "pageSize": 10,
          "pageNum": pageNum.value
        },
      })
      if (result.data.code === 200 && result.data.data) {
        result.data.data.forEach((user: any) => {
          if (user.tags) {
            // 将json字符串转换为数组
            user.tags = JSON.parse(user.tags)
          }
        })
        recommendUserList.value.push(...result.data.data) ;
      }
    }
  }
}
/**
 * swiper 轮播图片
 */
const images = [
  'https://img1.baidu.com/it/u=3661691604,3236462038&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
  'https://img2.baidu.com/it/u=1668624732,475816506&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
  'https://img2.baidu.com/it/u=597842114,2916926618&fm=253&fmt=auto?w=1280&h=800',
  'https://pic.imeitou.com/uploads/allimg/230110/7-230110092413.jpg',
  'https://img95.699pic.com/xsj/0p/zj/i8.jpg%21/fh/300',
  'https://img1.baidu.com/it/u=2824967856,2190591751&fm=253&fmt=auto&app=138&f=JPEG?w=420&h=500',
];
// 下面是心动按钮的控制
const checked = ref(false)
const isLoading = ref(false)

watch(checked, async (newValue) => {
  // 重置滚动位置到顶部
  const scrollContainer = document.getElementById('scroll-container');
  if (scrollContainer) {
    scrollContainer.scrollTop = 0;
  }
  //当checked发生变化时，判断checked是否为true为true就向后台请求相似用户
  if (newValue) {
    isLoading.value = true
    const result = await request.get('/user/match', {
      params: {
        "num": 10
      },
    })
    if (result.data.code === 200 && result.data.data) {
      result.data.data.forEach((user : any) => {
        if (user.tags) {
          // 将json字符串转换为数组
          user.tags = JSON.parse(user.tags)
        }
      })
      recommendUserList.value = result.data.data;
      isLoading.value = false
    } else {
      isLoading.value = false
      showFailToast('您还没有设置标签，请到个人页面设置标签');
      checked.value = false
    }
  } else {
    isLoading.value = true
    await getAllRecommendUser()
    isLoading.value = false
  }
});
</script>


<style scoped>
.notice-swipe {
  height: 40px;
  line-height: 40px;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  height: 180px;
  background-color: #39a9ed;
}
.scroll-container {
  height: 292px; /* 或根据需要调整 */
  overflow-y: auto;
}
</style>